<template>
  <div class="toolbar-container">
    <!-- 查看工具 -->
    <div class="query-tool">
      <div
        v-for="item in ToolBar.queryToolList"
        :key="item.id"
        :class="item.label === '调窗' ? 'tool-item-box select-box' : 'tool-item-box'"
      >
        <div
          class="tool-item"
          :class="ToolBar.currentId === item.id ? 'active' : ''"
          @click.stop="() => handleBarClick(item, true)"
        >
          <i :class="`iconfont ${item.name}`"></i>
        </div>
        <div v-if="item.label === '调窗'" class="select">
          <a-select allow-clear placeholder="选择窗位">
            <a-option v-for="item in PrData.dictList" :key="item.id" :value="item.value">{{ item.name }}</a-option>
          </a-select>
        </div>
      </div>
    </div>
    <!-- 标注工具 -->
    <div class="mark-tool" v-if="route.query.type !== 'view'" >
      <div class="tool-item-box" v-for="item in ToolBar.markToolList" :key="item.id">
        <div v-drag="'dragBox'" class="drag-box" :key="item.id">
          <a-trigger
            position="bl"
            trigger="click"
            class="tool-list-box"
            :popup-visible="item.isVisible"
            :unmount-on-close="false"
            :blur-to-close="false"
            :click-outside-to-close="false"
          >
            <div
              class="tool-item"
              :class="ToolBar.currentId === item.id ? 'active' : ''"
              @click.stop="handleMarkClick(item)"
            >
              <i
                :class="`iconfont ${item.name}`"
                :style="{
                  fontSize: [
                    'icon-danxinggoumian',
                    'icon-caozuoxing-kuaisuxua',
                    'icon-yuanxing',
                    'icon-juxing',
                    'icon-Rectangle',
                    'icon-jiaodu',
                  ].includes(item.name)
                    ? '18px'
                    : '30px',
                }"
              ></i>
            </div>
            <template #content>
              <!-- 渲染病灶 -->
              <div class="lesion-box">
                <!-- v-if="['矩形', '多边形'].includes(item.label)" -->
                <a-tooltip
                  :content="it?.name"
                  v-for="it in item.lesionList"
                  :key="it.lesion"
                  position="bottom"
                >
                  <div
                    class="drop-item"
                    @click.stop="() => handleBarClick(item, false, it)"
                  >
                    <div
                      class="drop-item-color"
                      :style="{ backgroundColor: it?.color }"
                    ></div>
                    <div>{{ it?.name }}</div>
                  </div>
                </a-tooltip>
              </div>
            </template>
          </a-trigger>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup name="ToolBar">
import { inject } from "vue";
import * as Store from "@/store";
import { useRoute } from "vue-router";
import type * as ToolBarType from "@/store/modules/processHeader/type";

const route = useRoute();
const ToolBar = Store.useProcessHeader();
const PrData = Store.useProcessData();
const provideState = inject("provideState", { getToolBarItem: new Function() });
const handleMarkClick = (item: { id: number; isVisible?: boolean }) => {
  ToolBar.currentId = 0;
  ToolBar.markToolList.map((item) => (item.isVisible = false));
  item.isVisible = !item.isVisible;
};
const handleBarClick = (
  item: { id: number; isVisible?: boolean },
  type: boolean = false,
  t?: ToolBarType.LesionItem
) => {
  item.isVisible = !item.isVisible;
  provideState.getToolBarItem(() => {
    return {
      currentItem: ToolBar.getTypeList(item.id, type),
      currentLesion: t,
    };
  });
};
</script>
<style lang="less" scoped>
@import url("../styles/toolBarScope.less");
</style>
<style lang="less">
@import url("../styles/toolBar.less");
</style>
